<template>
	<view>
		<no-data v-if="!groupList || groupList.length<=0" desc="暂无套餐"></no-data>
		<view v-else class="group-list">
			<view class="group-item" elevation="12px" v-for="(item, index) in groupList" :key="index">
				<text class="title">{{item.title}}</text>
				<course-item v-for="(info, i) in item.list" :key="i" :item="info">
				</course-item>
				<view class="price-box space-between center">
					<view class="price">
						<text class="group-price">￥{{item.groupPrice}}</text>
						<text class="total-price">￥{{item.totalPrice}}</text>
					</view>
					<text class="buy" @click="buyGroupHandler(item)">购买套餐</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import courseItem from '@/components/common/course-item.vue'

	import groupData from '@/mock/courseGroupData.js'

	import noData from "./no-data.vue"
	export default {
		components: {
			courseItem,
			noData
		},
		props: {
			groupList: {
				type: Array,
				default: () => groupData
			}
		},
	}
</script>
<style lang="scss">
	.group-item {
		margin: 36rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.1);
		padding: 0 20rpx;

		.title {
			font-size: 35rpx;
			font-weight: 500;
			padding-top: 20rpx;
		}

		.price-box {
			color: red;
			font-size: 30rpx;
			line-height: 80rpx;
			font-weight: bold;

			.group-price {
				font-size: 37rpx;
				margin-right: 10rpx;
			}

			.total-price {
				color: #999;
				font-weight: normal;
				text-decoration: line-through;
			}
		}
	}
</style>
